<script setup>

	import {reactive, ref} from "vue"

    const state = reactive(
        {
            id:"",
            name:"",
            age:"",
        msg:"测试",
        stus:[{
        id:1001,
        name:"张三",
        age:18
    },{
        id:1002,
        name:"李四",
        age:18
    }]})


    function add()
    {
        console.log("add()");
        state.stus.push({id:state.id,name:state.name,age:state.age});
    }

    function del(id)
    {
        console.log("del()"+id)
        for(var i=0;i<state.stus.length;i++)
        {
            if(state.stus[i].id == id)
            {
                state.stus.splice(i,1)
                break
            }
        }
    }

</script>

<template>
  <h1>学生管理</h1>
  {{state.msg}}
  <table>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </tr>
    <tr v-for="stu in state.stus">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.age}}</td>
        <td><a href="javascript:;" @click="del(stu.id)">删除</a></td>
    </tr>

  </table>

  <div>
    <h1>添加</h1>
    学号<input type="text" v-model="state.id">
    姓名<input type="text" v-model="state.name">
    年龄<input type="text" v-model="state.age">
    <button @click="add">添加</button>
  </div>
</template>

<style scoped>

</style>
